<template>
  <div class="Informationfactory">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        :label="item.label"
        :name="item.name"
        v-for="(item, index) in tabPaneData"
        :key="index"
      ></el-tab-pane>
    </el-tabs>
    <div class="boxList">
      <div class="tables" v-show="activeName === 'materialBreed'">
        <div class="tableUl" v-for="(item, index) in materialBreed" :key="index">
          <el-checkbox-group v-model="materialBreedList">
            <div class="checkboxs dn" v-show="index == 1">
              <el-checkbox>扩展数据</el-checkbox>
            </div>
            <div class="checkboxs" v-for="(items, indexs) in item" :key="indexs">
              <el-checkbox :label="items.companyId" @change="change">{{
                items.companyName
              }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div class="tables" v-show="activeName === 'check'">
        <div class="tableUl" v-for="(item, index) in check" :key="index">
          <el-checkbox-group v-model="checkList">
            <div class="checkboxs dn" v-show="index == 1">
              <el-checkbox>扩展数据</el-checkbox>
            </div>
            <div class="checkboxs" v-for="(items, indexs) in item" :key="indexs">
              <el-checkbox :label="items.companyId" @change="change">{{
                items.companyName
              }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div class="tables" v-show="activeName === 'technology'">
        <div class="tableUl" v-for="(item, index) in technology" :key="index">
          <el-checkbox-group v-model="technologyList">
            <div class="checkboxs dn" v-show="index == 1">
              <el-checkbox>扩展数据</el-checkbox>
            </div>
            <div class="checkboxs" v-for="(items, indexs) in item" :key="indexs">
              <el-checkbox :label="items.companyId" @change="change">{{
                items.companyName
              }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div class="tables" v-show="activeName === 'isNew1'">
        <div class="NewListBoX" v-for="(item, index) in NewList0" :key="index">
          <el-checkbox-group v-model="NewList0Check">
            <div class="newTitle">{{ item.companyName }}</div>
            <div class="newBox">
              <div
                class="elc"
                v-for="(items, indexs) in item.templateList"
                :key="'id' + indexs"
              >
                <!-- <el-checkbox :label="item.companyId+'/'+items.templateName" @change="(flag, data) => change(flag, data,item.companyId)">{{ -->
                <el-checkbox
                  :label="item.companyId+'/'+items.templateName +'/'+ items.id"
                  @change="change"
                  >{{ items.templateName }}</el-checkbox
                >
              </div>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div class="tables" v-show="activeName === 'isNew2'">
        <div class="NewListBoX" v-for="(item, index) in NewList" :key="index">
          <el-checkbox-group v-model="NewListCheck">
            <div class="newTitle">{{ item.companyName }}</div>
            <div class="newBox">
              <div
                class="elc"
                v-for="(items, indexs) in item.templateList"
                :key="'id' + indexs"
              >
                <!-- <el-checkbox :label="item.companyId+'/'+items.templateName" @change="(flag, data) => change(flag, data,item.companyId)">{{ -->
                <el-checkbox
                  :label="item.companyId+'/'+items.templateName +'/'+ items.id"
                  @change="change"
                  >{{ items.templateName }}</el-checkbox
                >
              </div>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div class="tables" v-show="activeName === 'sellRecord'">
        <div class="tableUl" v-for="(item, index) in sellRecord" :key="index">
          <el-checkbox-group v-model="sellRecordList">
            <div class="checkboxs dn" v-show="index == 1">
              <el-checkbox>扩展数据</el-checkbox>
            </div>
            <div class="checkboxs" v-for="(items, indexs) in item" :key="indexs">
              <el-checkbox :label="items.companyId" @change="change">{{
                items.companyName
              }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <el-form>
      <el-form-item class="footerFixed">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="backPage">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  emPower_lookState as EmPowerLookState,
  emPower_updateState as EmPowerUpdateState,
  lookTemplateState,
  updateTemplateState,
} from "@/request/manageapi";
export default {
  name: "XlsInformationfactory",

  data() {
    return {
      id: "",
      activeName: "materialBreed",
      tabPaneData: [
        {
          name: "materialBreed",
          label: "物料管理",
        },
        // {
        //   name: "sellRecord",
        //   label: "销售备案号",
        // },
        {
          name: "check",
          label: "检测依据",
        },
        {
          name: "technology",
          label: "工艺工序",
        },
        {
          name: "isNew1",
          label: "打印模板(新)",
        },
        // {
        //   name: "isNew2",
        //   label: "打印模板(旧)",
        // },
      ],
      materialBreed: [],
      materialBreedList: [],
      materialBreeds: {},
      sellRecord: [],
      sellRecordList: [],
      sellRecords: {},
      check: [],
      checkList: [],
      checks: {},
      technology: [],
      technologyList: [],
      technologys: {},
      NewList0: [],
      NewList0Check: [],
      NewList0s: {},
      NewList: [],
      NewListCheck: [],
      NewLists: {},
    };
  },
  created() {
    let query = this.$route.query;
    let { id } = query;
    this.id = id;
    this.getWarrant();
  },
  mounted() {},

  methods: {
    // test() {
    //   test("").then((res) => {
    //     console.log(res);
    //   });
    // },
    submitForm() {
      let companyId = this.id;
      let type = this.activeName;
      let data = this[type + "s"];
      this.$confirm("是否确认提交?", "提交", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (type === "isNew1") {
            this.updateTemplateState(companyId, "1", this.NewList0s,'NewList0s');
          } else if (type === "isNew2") {
            this.updateTemplateState(companyId, "2", this.NewLists,'NewLists');
          } else {
            this.EmPowerUpdateState(companyId, type, data);
          }
        })
        .catch(() => {
          this.$notify({
            title: "提示",
            message: "提交取消",
            type: "success",
            duration: 1000,
          });
        });
    },
    backPage() {
      this.$router.go(-1);
    },
    handleClick(tab, event) {
      this.getWarrant();
    },
    getWarrant() {
      let companyId = this.id;
      let type = this.activeName;
      let str = `?companyId=${companyId}&&type=${type}`;
      if (type !== "isNew1" && type !== "isNew2") {
        EmPowerLookState(str)
          .then((res) => {
            if (res.code == 200) {
              this[type] = [];
              let listData = res.data;
              for (let key in listData) {
                if (Array.isArray(listData[key])) {
                  this[type].push(listData[key]);
                } else {
                  this[type].push([listData[key]]);
                }
              }
              let timps = type + "List";
              this[timps] = [];
              this[type].map((item) => {
                item.map((items) => {
                  if (items.codeSelect === "0") {
                    this[timps].push(items.companyId);
                  }
                });
              });
            }
          })
          .catch((err) => {});
      } else {
        let isNew = "";
        let temps = "";
        let temp = "";
        if (type == "isNew1") {
          isNew = "1";
          temps = "NewList0";
          temp = "NewList0Check";
        } else {
          isNew = "2";
          temps = "NewList";
          temp = "NewListCheck";
        }
        let str = `?companyId=${companyId}&&isNew=${isNew}`;
        this[temp] = [];
        lookTemplateState(str).then((res) => {
          console.log(res);
          if (res.code == 200) {
            let NewList = res.data;
            NewList.map((item) => {
              item.templateList.map((items) => {
                if (items.isSelect === "0") {
                  this[temp].push(item.companyId + "/" + items.templateName +"/"+ items.id);
                }
              });
            });
            this[temps] = NewList;
          }
        });
      }
    },
    change(flag, data) {
      let key = data.target["_value"];
      let type = this.activeName;
      let value = "";
      if (flag) {
        value = "0";
      } else {
        value = "1";
      }
      if (type === "materialBreed") {
        this.materialBreeds[key] = value;
      } else if (type === "check") {
        this.checks[key] = value;
      } else if (type === "technology") {
        this.technologys[key] = value;
      } else if (type === "isNew2") {
        let str = key.split("/");
        this.NewLists[key] = [value, str[0], str[1],str[2]];
      } else if (type === "isNew1") {
        let str = key.split("/");
        this.NewList0s[key] = [value, str[0], str[1],str[2]];
      } else if (type === "sellRecord") {
        this.sellRecords[key] = value;
        // console.log(key,value)
      }
    },
    updateTemplateState(companyId, isNew, data,temp) {
      let updateDTOList = [];
      for (let key in data) {
        updateDTOList.push({
          fromCompanyId: data[key][1],
          templateName: data[key][2],
          value: data[key][0],
          templateId:data[key][3]
        });
      }
      console.log(updateDTOList);
      updateTemplateState({
        companyId,
        isNew,
        updateDTOList,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this[temp] = {}
            this.$notify({
              title: "提示",
              message: "提交成功",
              type: "success",
              duration: 1000,
            });
          }
        })
    },
    EmPowerUpdateState(companyId, type, data) {
      let updateDTOList = [];
      let temp = type+'s'
      for (let key in data) {
        updateDTOList.push({
          fromCompanyId: key,
          value: data[key],
        });
      }
      EmPowerUpdateState({
        companyId,
        type,
        updateDTOList,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this[temp] = {}
            this.$notify({
              title: "提示",
              message: "提交成功",
              type: "success",
              duration: 1000,
            });
          }
        })
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-checkbox__inner {
  border-radius: 50%;
}
.dn {
  /deep/.el-checkbox__input {
    display: none;
  }
}
.Informationfactory {
  width: 100%;
  min-height: 65%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
  .boxList {
    width: 100%;
    min-height: 20vh;
    // background-color: pink;
    margin-top: 20px;
    .tables {
      width: 100%;
      min-height: 50px;
      border-radius: 10px;
      border: 1px solid #999;
      .NewListBoX {
        width: 100%;
        height: auto;
        border-bottom: 1px solid #e1e1e1;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        &:nth-last-of-type(1) {
          border: none;
        }
        .newTitle {
          width: 100%;
          height: 50px;
          line-height: 50px;
          padding-left: 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #e1e1e1;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
        }
        .newBox {
          width: 100%;
          min-height: 50px;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          .elc {
            height: 50px;
            min-width: 120px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-left: 20px;
          }
        }
      }
      .tableUl {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        padding-left: 20px;
        &:nth-last-of-type(1) {
          border: none;
        }
        /deep/.el-checkbox-group {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .checkboxs {
          margin-left: 10px;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 120px;
        }
      }
    }
  }
}
</style>
